<template>
    <div class="first_level_page">
        <section class="tab_section">
          <div class="tab" @click="activateTab('全部');getAllOrderShipmentList()" :class="{ 'active': activeTab === '全部' }">全部</div>
          <div class="tab" @click="activateTab('装货');getOrderShipmentList()" :class="{ 'active': activeTab === '装货' }">装货</div>
          <div class="tab" @click="activateTab('发货');getOtherOrderShipmentList()" :class="{ 'active': activeTab === '发货' }">发货</div>
          <div class="tab" @click="activateTab('交货');getOrderSubShipmentList()" :class="{ 'active': activeTab === '交货' }">交货</div>
        </section>
        <div class="marginTopHeight"></div>
        <div class="inorder_demo" v-for="order in orderShipment">
            <div class="inorder_top clear">
                <div class="left">
                    采购单号：{{order.order_code}}
                </div>
                 <div class="right">
                   {{ order.create_time | formatDate }}
                </div>
            </div>
            <div class="inorder_main clear">
                <div class="inorder_num_price clear">
                    <div class="left">采购数量：{{ order.buy_num }}</div>
                    <div class="right">¥{{order.amount}}元</div>
                </div>
                <div class="inorder_address clea">
                    <img class="left" src="../../images/location1.png">
                    <div class="left">{{order.address}}</div>
                </div>
            </div>
            <div class="inorder_bottom" v-if="order.order_step == 4">
                <div class="btn" @click="shipment(order.order_code)">开始装货</div>
                <div class="inorder_state right">
                    <img src="../../images/mark.png">
                    待装货
                </div>
            </div>
          <div class="inorder_bottom" v-if="order.order_step == 5">
            <div class="btn" @click="otherShipment(order.order_code)">开始发货</div>
            <div class="inorder_state right">
              <img src="../../images/mark.png">
              待发货
            </div>
          </div>
          <div class="inorder_bottom" v-if="order.order_step == 6">
            <div class="inorder_state right">
              <img src="../../images/success_icon.png">
              订单已完成
            </div>
          </div>
        </div>
        <div class="heightBottom"></div>
        <foot-guide></foot-guide>
    </div>
</template>

<script>
    import footGuide from 'src/components/footer/footGuide'
    import {
      getAllOrderShipment,
      getOrderShipment, getOrderSubShipment,
      getOtherOrderShipment,
      getUpdateShipment, getUpdateShipment2
    } from "../../service/logistics";


    export default {
        data(){
            return{
              // 订单物流列表
              orderShipment: [],
              activeTab: '全部',
            }
        },
        mounted(){
          this.getAllOrderShipmentList();
          // this.getOrderShipmentList();
        },
        components: {
            footGuide,
        },
      filters: {
        formatDate(value) {
          if (value) {
            const date = new Date(value);
            return date.toLocaleDateString();
          }
          return '';
        }
      },
        methods: {
          activateTab(tabName) {
            this.activeTab = tabName;
          },
          getAllOrderShipmentList(){
            let userId = JSON.parse(localStorage.getItem('supplierInfo')).userId;
            console.log("userId", userId);
            getAllOrderShipment(userId).then(response => {
              this.orderShipment = response.data;
            });
          },
          getOtherOrderShipmentList(){
            let userId = JSON.parse(localStorage.getItem('supplierInfo')).userId;
            console.log("userId", userId);
            getOtherOrderShipment(userId).then(response => {
              this.orderShipment = response.data;
            });
          },
          getOrderSubShipmentList(){
            let userId = JSON.parse(localStorage.getItem('supplierInfo')).userId;
            console.log("userId", userId);
            getOrderSubShipment(userId).then(response => {
              this.orderShipment = response.data;
            });
          },
          getOrderShipmentList(){
            let userId = JSON.parse(localStorage.getItem('supplierInfo')).userId;
            console.log("userId", userId);
            getOrderShipment(userId).then(response => {
              this.orderShipment = response.data;
            });
          },
          shipment(order_code){
            this.$confirm(`确认要开始装货订单编号为'${order_code}'对应的信息吗`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              getUpdateShipment(order_code).then(response => {
                this.$message({
                  type: 'success',
                  message: '装货成功'
                });
                this.getOrderShipmentList();
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消装货'
                });
              });
            });
          },
          otherShipment(order_code){
            this.$confirm(`确认要开始发货订单编号为'${order_code}'对应的信息吗`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              getUpdateShipment2(order_code).then(response => {
                this.$message({
                  type: 'success',
                  message: '发货成功'
                });
                this.getOrderShipmentList();
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消发货'
                });
              });
            });
          },
        }
    }
</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    .tab_section{
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        @include wh(100%, .88rem);
        line-height: .88rem;
        @include sc(.3rem, #333);
        background: #fff;
        .tab{
            flex: 1;
            text-align: center;
            margin: 0 .2rem;
        }
        .tab.active{
            color: $blue;
            border-bottom: .04rem solid $blue;
        }
    }
    .marginTopHeight{
        @include wh(100%, .88rem);
    }
    .inorder_demo{
        background: #fff;
        margin-top: .2rem;
        border-bottom: .01rem solid #e3e3e3;
        .inorder_top{
            @include wh(100%, .78rem);
            border-bottom: .01rem solid #e3e3e3;
            padding: 0 .2rem;
            div{
                @include sc(.28rem, #999);
                line-height: .78rem;
            }
        }
      .left{
        width: 500px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
        .inorder_main{
            border-bottom: .01rem solid #e3e3e3;
            padding: 0 .2rem;
            .inorder_num_price{
                div{
                    @include sc(.28rem, #333);
                    margin: .34rem 0 .26rem;
                    height: .28rem;
                    line-height: .28rem;
                }
              .right{

              }
            }
            .inorder_address{
                font-size: 0;
                @include wh(100%, .8rem);
                margin-bottom: .28rem;
                img{
                    @include wh(.3rem, .38rem);
                    margin: .21rem 0;
                }
                div{
                    @include wh(6.7rem, .8rem);
                    @include sc(.28rem, #333);
                    margin-left: .1rem;
                    margin-top: .2rem;
                }
            }
        }
        .inorder_bottom{
            @include wh(100%, .82rem);
            padding: 0 .2rem;
            .btn{
                float: left;
                @include wh(1.6rem, .54rem);
                line-height: .54rem;
                @include sc(.28rem, $blue);
                border: .01rem solid $blue;
                border-radius: .04rem;
                text-align: center;
                margin-top: .14rem;
            }
            .inorder_state{
                @include sc(.28rem, #333);
                height: .82rem;
                line-height: .82rem;
                img{
                    @include wh(.34rem, .34rem);
                    float: left;
                    margin: .24rem .06rem;
                }
          }
        }
    }
</style>
